<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bk-icon-2.0/iconfont.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/components/form.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>

    <!--时间日期选择文件依赖-->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css"
        rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>

</head>

<body>
    <!--HTML-->
    <p class="magic-desc">添加任务</p>
    <form class="bk-form" style="width:600px;" id="validate_form">
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">任务名称</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <input type="text" class="bk-form-input" placeholder="请输入任务名称">
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">任务星级</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <select name="validation_select" class="bk-form-select">
                    <option value="beijing">一星任务</option>
                    <option value="shanghai">一星任务</option>
                    <option value="guangzhou">一星任务</option>
                    <option value="shenzhen">一星任务</option>
                </select>
            </div>
        </div>
        <div class="bk-form-item">
            <label class="bk-label" style="width:150px;">备注</label>
            <div class="bk-form-content" style="margin-left:150px;">
                <textarea name="" id="" class="bk-form-textarea" placeholder=""></textarea>
            </div>
        </div>
        <div class="bk-form-item bk-form-action">
            <div class="bk-form-content" style="margin-left:150px;">
                <a class="bk-button bk-primary" id="submit" title="保存">
                    <span>保存</span>
                </a>
                <a class="bk-button" title="取消">
                    <span>取消</span>
                </a>
            </div>
        </div>
    </form>

    <div class="king-block-content plugin16_demo" id="plugin16_demo2">
        开始日期：<span class="k-widget k-datepicker k-header form-control" style=""><span
                class="k-picker-wrap k-state-default"><input type="text" class="form-control k-input"
                    id="plugin16_demo2_1" placeholder="选择日期..." data-role="datepicker" role="combobox"
                    aria-expanded="false" aria-owns="plugin16_demo2_1_dateview" aria-disabled="false"
                    aria-readonly="false" style="width: 100px;"><span unselectable="on" class="k-select" role="button"
                    aria-controls="plugin16_demo2_1_dateview"><span unselectable="on"
                        class="k-icon k-i-calendar">select</span></span>
            </span>
        </span>
        结束日期：<span class="k-widget k-datepicker k-header form-control" style=""><span
                class="k-picker-wrap k-state-default"><input type="text" class="form-control k-input"
                    id="plugin16_demo2_2" placeholder="选择日期..." data-role="datepicker" role="combobox"
                    aria-expanded="false" aria-owns="plugin16_demo2_2_dateview" aria-disabled="false"
                    aria-readonly="false" style="width: 100%;"><span unselectable="on" class="k-select" role="button"
                    aria-controls="plugin16_demo2_2_dateview"><span unselectable="on"
                        class="k-icon k-i-calendar">select</span></span>
            </span>
        </span>
    </div>
    <script type="text/javascript">
        function startChange() {
            var startDate = start.value(),
                endDate = end.value();

            if (startDate) {
                startDate = new Date(startDate);
                startDate.setDate(startDate.getDate());
                end.min(startDate);
            } else if (endDate) {
                start.max(new Date(endDate));
            } else {
                endDate = new Date();
                start.max(endDate);
                end.min(endDate);
            }
        }
        function endChange() {
            var endDate = end.value(),
                startDate = start.value();

            if (endDate) {
                endDate = new Date(endDate);
                endDate.setDate(endDate.getDate());
                start.max(endDate);
            } else if (startDate) {
                end.min(new Date(startDate));
            } else {
                endDate = new Date();
                start.max(endDate);
                end.min(endDate);
            }
        }
        var start = $("#plugin16_demo2_1").kendoDatePicker({
            change: startChange,
            format: "yyyy-MM-dd"
        }).data("kendoDatePicker");
        var end = $("#plugin16_demo2_2").kendoDatePicker({
            change: endChange,
            format: "yyyy-MM-dd"
        }).data("kendoDatePicker");
        start.max(end.value());
        end.min(start.value());
    </script>

</body>

</html>